<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>伴身守护神抽取</title>
	</head>
	<body>
		<button type="button" onclick="doout(event);">开始</button>
		<table border="" cellspacing="" cellpadding="10px" bgcolor="aqua">
			<tr>
				<td id="JP1">①<img src="img/1.jpg"  width="100px" height="80px"></td>
				<td id="JP2">②<img src="img/2.jpg"  width="100px" height="80px"></td>
				<td id="JP3">③<img src="img/3.jpg"  width="100px" height="80px"></td>
				<td id="JP4">④<img src="img/4.jpg"  width="100px" height="80px"></td>
			</tr>
			<tr>
				<td id="JP5">⑤<img src="img/5.jpg"  width="100px" height="80px" ></td>
				<td id="JP6">⑥<img src="img/6.jpg"  width="100px" height="80px" ></td>
				<td id="JP7">⑦<img src="img/7.jpg"  width="100px" height="80px" ></td>
				<td id="JP8">⑧<img src="img/8.jpg"  width="100px" height="80px" ></td>
			</tr>
			<tr>
				<td id="JP9">⑨<img src="img/9.jpg"  width="100px" height="80px" ></td>
				<td id="JP10">⑩<img src="img/10.jpg"  width="100px" height="80px" ></td>
				<td id="JP11">11<img src="img/11.jpg"  width="100px" height="80px" ></td>
				<td id="JP12">12<img src="img/12.jpg"  width="100px" height="80px" ></td>
			</tr>
			<tr>
				<td id="JP13">13<img src="img/13.jpg"   width="100px" height="80px"></td>
				<td id="JP14">14<img src="img/14.jpg"   width="100px" height="80px"></td>
				<td id="JP15">15<img src="img/15.jpg"  width="100px" height="80px "></td>
				<td id="JP16">16<img src="img/16.jpg"   width="100px" height="80px"></td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
			function doout(event){
				event.target.innerText = '抽奖中...';
				var num = 0;
				var myInerterval = setInterval(function(){
					var allTds = document.getElementsByTagName('td');
					for(var i=0;i<allTds.length;i++){
						allTds[i].style.backgroundColor = 'aqua';
					}
					var randNum  = getRandValidNum();
					console.log('公布抽奖结果:'+randNum);
					document.getElementById('JP'+randNum).style.backgroundColor = 'red';
					num++;
					if(num>30){
						clearInterval(myInerterval);
						event.target.innerText = '重新抽奖';
					}
				},50)
			}
			//递归
			function getRandValidNum(){
				while(true){
					var randNum = Math.floor(Math.random()*10);
					if(randNum!=0){
						return randNum;
					}
				}				
			}
		</script>
	
</html>
